<template>
	<view class="user_detail">
		<NavigationTitle title="新增员工" style="color: #000;background: #fff;position: fixed;width: 100%;z-index: 5;">
			<template slot="left_con">
				<image class="back_icon" src="@/static/common/back.png" mode="widthFix" @tap="backSelf" />
			</template>
		</NavigationTitle>
		<view class="status-bar"></view>
		<view class="main">
			<view class="top_btn">
				<button type="primary" @click="addFormItem" class="btn">新增</button>
				<button type="reset" @click="delFormAll" class="btn">清空</button>
			</view>
			<uni-forms ref="userForm" :modelValue="userFormData" class="form_main" label-position="top">
				<uni-forms-item v-for="(item,index) in userList" :key="item.id">
					<view class="form-item">
						<text class="item-title">姓名：</text><uni-easyinput v-model="item.userName"
							placeholder="请输入用户姓名" />
						<text class="item-title">手机号：</text><uni-easyinput :errorMessage="errItem.id==item.id?true:false"  v-model="item.userPhone"
							placeholder="请输入用户手机号" />
						<text class="item-title">角色：</text><uni-data-picker placeholder="请选择用户角色" popup-title="请选择用户角色"
							:localdata="roleOption" :map="map" v-model="item.roleId" @change="changeRole">
						</uni-data-picker>
						<button class="form-item-button" size="mini" type="default"
							@click="delFormItem(item.id)">删除</button>
					</view>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="subUser" style="width: 50%; margin: auto;">提交</button>
		</view>
	</view>
</template>

<script>
	import NavigationTitle from '@/components/navigationTitle'
	import {
		showToastMsg,
	} from '@/utils/format.js'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		components: {
			NavigationTitle
		},
		computed: {
			...mapGetters(['projectId', 'roleTree'])
		},
		data() {
			return {
				roleOption: [],
				map:{text:'roleName',value:'roleId'},
				userFormData: {},
				userList: [],
				errItem:{}
			}
		},
		onShow() {
			this.roleOption = this.roleTree || []
		},
		onLoad(){
			this.addFormItem()
		},
		methods: {
			backSelf() {
				uni.navigateBack({
					delta: 1
				})
			},
			delFormAll(){
				this.userList = []
			},
			addFormItem() {
				this.userList.unshift({
					roleId: null,
					userName: "",
					userPhone: '',
					id: Date.now(),
					projectId:this.projectId,
					compId:JSON.parse(JSON.stringify(uni.getStorageSync('userInfo'))).compId,
				})
			},
			delFormItem(id) {
				let index = this.userList.findIndex(v => v.id === id)
				this.userList.splice(index, 1)
			},
			subUser(){
				let target = true
				if (this.userList.length > 0) {
					this.userList.map(v => {
						for (let key in v) {
							if (!v[key]) {
								target = false
								showToastMsg('请输入项目成员！')
								return false
							}
							if(key=='userPhone'){
								if(!(/^1[3456789]\d{9}$/.test(v[key]))){
									target = false
									this.errItem = v
									showToastMsg('手机号码不合法，请重新输入')
									return false; 
								}
							}
						}
					})
				} else {
					target = false
					showToastMsg('请输入项目成员！')
				}
				if(target){
					this.errItem = []
					this.addUser(this.userList)
				} 
			},
			async addUser(data){
				console.log(data)
				const res = await this.$api.addProjectUser(data).catch(err=>{
					console.log(err)
				})
				if(res?.code==200){
					this.backSelf()
					this.userList=[]
				}
				showToastMsg(res.msg)
			},
			changeRole(e) {
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/global.scss';

	view {
		box-sizing: border-box;
	}

	.user_detail {
		position: relative;
		height: 100%;
	}

	.top_btn {
		width: 100%;
		margin: 24rpx auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.btn {
			min-width: 25%;
		}
	}

	.form_main {
		min-height: 1000rpx;
		max-height: 1200rpx;
		overflow: auto;
		.form-item {
			border-bottom: 1px solid #999;

			&>uni-view {
				margin-bottom: 24rpx;
			}

			.form-item-button {
				color: red;
			}

			.item-title {
				font-size: 32rpx;
			}
		}

		.uni-forms-item {
			/deep/ .uni-forms-item__label {
				width: 100% !important;
				height: 0;
				font-size: 34rpx;
			}

			/deep/ .uni-forms-item__content {
				flex: 1;
				min-height: 70rpx;
				padding: 0 12rpx;
			}

			/deep/ .uni-input-placeholder {
				font-size: 28rpx;
			}

			/deep/ .uni-select__input-placeholder {
				font-size: 28rpx;
				color: #999;
			}
		}
	}

	.main {
		padding-top: $System__title_height;
	}

	.back_icon {
		width: 37upx;
	}
</style>